import { Button } from 'antd'
import { FC, useRef } from 'react'
import { ITodo } from '../data'


interface IInput {
  addTodo: (value: ITodo) => void,
  todoList: ITodo[]
}
const Input: FC<IInput> = ({ addTodo, todoList }) => {
  const inpRef = useRef<HTMLInputElement>(null)
  const addItem = () => {
    const value = inpRef.current?.value.trim()
    if (!value) return
    const flag = todoList.some(item => {
      return item.value === value
    })
    if (flag) {
      alert('已经纯在')
    } else {
      addTodo({
        completed: false,
        value,
        id: Date.now()
      })
    }
    inpRef.current!.value = ''
    inpRef.current?.focus()
  }
  return (
    <div>
      <input ref={inpRef}></input>
      <Button type='primary' onClick={() => { addItem() }} >add</Button>
    </div>
  )
}

export default Input